<!-- 报名情况列表 -->
<template>
  <div class="registration_list">
    <el-main class="base_main_content">
      <div class="base_screen_header">
        <BackTitleView title="报名情况列表" />
        <el-button type="primary" text @click="getExport">导出</el-button>
      </div>
      <el-table :data="resultGroupData" border>
        <el-table-column
          v-for="(item, index) in resultGroupColumn"
          :key="index"
          :label="item.label"
          :prop="item.prop"
          :width="item.width"
          align="center"
        />
      </el-table>
      <div class="base_main_margin_top">
        <DataCollectTable :data="data" :total="total" :config="tableConfig" @operationsHander="opHander.receive">
        </DataCollectTable>
      </div>
    </el-main>
  </div>
</template>

<script setup>
import BackTitleView from "@com/BackTitleView.vue";
import DataCollectTable from '@com/table/DataCollectTable.vue'
import { OP_KEY, OPERATIONS, operationsHander } from "@com/table/tableOperations";
import { ref, reactive, computed } from 'vue';
import { Search } from '@element-plus/icons-vue'
import useRoute from "@util/router";
import api from "@api/groupRemain";
import $ from "@util/base"
import { $msg } from '@/common/ui/msg';

const route = useRoute()

const total = ref(0)
const data = ref([])

// function getOperations() {
//   return [OPERATIONS.check]
// }

const tableConfig = {
  showIndex: true,
  // operations: {
  //   label: '操作',
  //   width: 120,
  //   operations: getOperations
  // },
  column: [
    {
      label: '订单编号',
      prop: 'orderCode',
    }, {
      label: '下单时间',
      prop: 'createTime',
    }, {
      label: '订单状态',
      prop: 'orderStatus',
      width: 100,
    }, {
      label: '归属基地',
      prop: 'shopName',
      width: 150,
    }, {
      label: '预订人',
      prop: 'guestName',
      width: 150,
    }, {
      label: '联系方式',
      prop: 'phoneNumber',
      width: 150,
    }, {
      label: '身份证信息',
      prop: 'identityCardNumber',
      width: 150,
    }, {
      label: '签署合同状态',
      prop: 'isSign',
      width: 150,
    }
  ]
}

const opHander = operationsHander();
opHander.install(OP_KEY.check, (data) => {
  // route.push({ name: 'registrationlist', query: { code: data.flowData } })
});

const resultGroupData = ref([])

const resultGroupColumn = [
  {
    label: '发团日期',
    prop: 'startGroupTime',
  }, {
    label: '套餐名称+团号',
    prop: 'nameAndCode',
  }, {
    label: '最大收客',
    prop: 'maxHoldVisitor',
    width: 100,
  }, {
    label: '未签/已签合同',
    prop: 'whetherSign',
    width: 150,
  }, {
    label: '未收款/已收款',
    prop: 'whetherReceived',
    width: 150,
  }, {
    label: '占位/已确认',
    prop: 'whetherHolder',
    width: 150,
  }, {
    label: '余位',
    prop: 'surplusSeat',
    width: 100,
  }
]

getData()
route.watchRouter("registrationlist", () => { getData() })

function getData() {
  let routeQuery = route.query()
  api.registrationList({
    groupCode: routeQuery.code,
    page: routeQuery.p,
    size: routeQuery.s
  }, val => {
    data.value = val.itemList
    total.value = val.total
    resultGroupData.value = handleResultGroup(val.resultGroupItem)
  })
}

function handleResultGroup(data) {
  let obj = {}
  // 套餐名称+团号
  obj.nameAndCode = `${data.packageName ? data.packageName : '-'}/${data.groupCode}`
  // 未签/已签合同
  obj.whetherSign = `${data.noSign}/${data.isSign}`
  // 未收款/已收款
  obj.whetherReceived = `${data.uncollected}/${data.received}`
  // 占位/已确认
  obj.whetherHolder = `${data.holder}/${data.isHolder}`
  return [{...data, ...obj}]
}

function getExport() {
  let routeQuery = route.query()
  api.registrationExport({
    groupCode: routeQuery.code,
  }, val => {
    $.download(val.url, "报名情况列表导出")
  })
}
</script>